<template>
    <footer class="commonFooter wrap">
        <div class="commonfooter-blogroll-wrapper">
            <div class="commonfooter-blogroll-wrap">
                <div class="commonfooter-blogroll-tit">友情链接：</div>
                <div class="commonfooter-blogroll-item">
                    <a href="#">新浪微博</a>
                    <a href="#">腾讯视频</a>
                    <a href="#">百度贴吧</a>
                    <a href="#">搜狐新闻</a>
                    <a href="#">网易邮箱</a>
                    <a href="#">去哪儿网</a>
                    <a href="#">迅雷看看</a>
                    <a href="#">拼多多</a>
                    <a href="#">今日头条</a>
                    <a href="#">高德地图</a>
                </div>
            </div>
        </div>

        <div class="commonfooter-con-wrapper">
            <div class="commonfooter-con-wrap">
                <div class="commonfooter-con-logo">
                    <img src="" alt />
                </div>
                <div class="commonfooter-con-about">
                    <dl>
                        <dt>关于我们</dt>
                        <dd>大华简介</dd>
                        <dd>行业动态</dd>
                        <dd>推荐就业</dd>
                        <dd>诚聘英才</dd>
                    </dl>
                    <dl>
                        <dt>服务与支持</dt>
                        <dd>常见问题</dd>
                        <dd>投诉反馈</dd>
                        <dd>人工客服</dd>
                        <dd>校企合作</dd>
                    </dl>
                    <div class="commonfooter-con-about-contactus">
                        <p>联系我们</p>
                        <p>18210333691</p>
                        <p>周一至周五9:00-18:00</p>
                    </div>
                </div>
                <div class="commonfooter-con-contact">
                    <div class="commonfooter-con-contact-img">
                        <img src="http://itdahua.com/img/dahua_commonfooter_qr.f423e885.png" alt="">
                    </div>
                    <span>关注公众号</span>
                </div>
            </div>
        </div>

        <div class="commonfooter-copyright-wrap">
            <div class="commonfooter-copyright">
                <span>2003-2019 TMALL.COM</span>
                <a href="#">
                    <img src="" alt />
                    【 京ICP备2021018170号-1】
                </a>
            </div>
        </div>
    </footer>
</template>

<style lang="scss" scoped>
.commonFooter {
    width: 100%;
    min-width: 1200px;
    height: 372px;
    background-color: rgb(50, 56, 64);
    .commonfooter-blogroll-wrapper {
        width: 100%;
        min-width: 1200px;
        height: 39px;
        background-color: #444c56;
        .commonfooter-blogroll-wrap {
            width: 1200px;
            margin: 0 auto;
            height: 100%;
            .commonfooter-blogroll-tit {
                color: #fff;
                font-size: 16px;
                font-weight: 400;
                height: 100%;
                line-height: 39px;
                float: left;
            }
            .commonfooter-blogroll-item {
                display: flex;
                flex-wrap: nowrap;
                height: 100%;
                align-items: center;
                a {
                    font-size: 14px;
                    color: #ccc;
                    margin-left: 35px;
                    text-decoration: none;
                }
            }
        }
    }
    .commonfooter-con-wrapper {
        width: 100%;
        min-width: 1200px;
        height: 294px;
        .commonfooter-con-wrap {
            width: 1200px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;
            .commonfooter-con-about {
                display: flex;
                flex: 1;
                justify-content: space-between;
                padding-left: 128px;
                padding-right: 47px;
                dl dt {
                    font-size: 16px;
                    color: #999;
                    margin-bottom: 20px;
                    font-weight: 400;
                }
                dl dd {
                    font-size: 14px;
                    margin-bottom: 12px;
                    color: #999;
                }
                .commonfooter-con-about-contactus {
                    display: flex;
                    flex-direction: column;
                    color: #999;
                    p:nth-child(1) {
                        font-size: 16px;
                        font-weight: 400;
                        margin-bottom: 18px;
                    }
                    p:nth-child(2) {
                        font-size: 20px;
                        margin-bottom: 14px;
                    }
                    p:nth-child(3) {
                        font-size: 14px;
                    }
                }
            }
            .commonfooter-con-contact {
                display: flex;
                flex-direction: column;
                align-items: center;
                .commonfooter-con-contact-img {
                    background-color: #656b74;
                    padding: 7px;
                    border-radius: 7px;
                }
                span {
                    font-size: 14px;
                    color: #656b74;
                    margin-top: 12px;
                }
            }
        }
    }
    .commonfooter-copyright-wrap {
        width: 100%;
        height: 39px;
        background-color: #202429;
        .commonfooter-copyright {
            width: 1200px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            margin: 0 auto;
            span {
                font-size: 12px;
                margin-right: 22px;
                color: #f2f2f2;
            }
            a {
                font-size: 12px;
                color: #f2f2f2;
                text-decoration: none;
            }
        }
    }
}
</style>